$(function () {
    load()
    $('#title').on('keydown', function (e) {
        if (e.keyCode === 13) {
            var local = getDate()
            // console.log(local);
            local.push({
                title: $(this).val(),
                done: false
            })
            setData(local)
            // var local = [{
            //     title: $(this.val()),
            //     done: false
            // }]
            load()
        }
    })

    // 删除
    $('ol').on('click', 'a', function () {
        var data = getDate()
        var index = $(this).attr('index')
        // alert(index)
        data.splice(index, 1)
        setData(data)
        load()

    })

    // 已完成和未完成事件

    $('ol ,ul').on('click', "input", function () {
        // 获取数据
        var data = getDate()
        var index = $(this).siblings('a').attr('index')
        data[index].done = $(this).prop('checked')
        setData(data)
        load()
    })
    // 封装查询本地存储函数
    function getDate(data) {
        var data = localStorage.getItem('todolist')
        if (data !== null) {
            return JSON.parse(data)
        } else {
            return []
        }
    }
    // 封装添加本地存储函数

    function setData(data) {
        var data = localStorage.setItem('todolist', JSON.stringify(data))
    }

    // 封装渲染函数
    function load() {
        var data = getDate()
        $('ol,ul').empty()
        var t = 0;
        var d = 0;
        $.each(data, function (i, ele) {
            if (ele.done) {
                var li = $(`<li>
                <input type="checkbox" checked>
                <p>${ele.title}</p>
                <a href="JavaScript:;" index = ${i}></a>
            </li>`)
                $('ul').prepend(li)
                d++
            } else {
                var li = $(`<li>
            <input type="checkbox">
            <p>${ele.title}</p>
            <a href="JavaScript:;" index = ${i}></a>
        </li>`)
                $('ol').prepend(li)
                t++
            }
        })
        $('#todocount').html(t)
        $('#donecount').html(d)
    }
})